<dom-module id="ve-asset">
    <style>
         :host {
            display: flex;
            position: relative;
            box-sizing: border-box;
            min-width: 60px;
            min-height: 24px;
            border: 1px solid #666;
            cursor: default;
        }
        
        .border {
            position: relative;
            border: 1px solid #000;
            width: 100%
        }
        
         :host[focused] {
            border: 1px solid #0c70a6
        }
    </style>
    <template>
        <div id="dropArea" class="flex-1" on-dragover="_onDragOver">
            <ve-input id="input" placeholder="resource" class="flex-1" value="{{inputValue}}" cancelable unnavigable></ve-input>
        </div>
    </template>
    <script>
        (() => {
            "use strict";
            Polymer({
                hostAttributes: {
                    droppable: "asset",
                    "single-drop": true
                },
                listeners: {
                    "dragover": "_onDropAreaOver",
                    "drop": "_onDropAreaAccept"
                },
                properties: {
                    value: {
                        type: String,
                        value: null,
                        notify: true,
                        observer: "_valueChanged"
                    },
                    inputValue: {
                        type: String,
                        notify: true,
                        value: '',
                        observer: "_inputValueChanged"
                    },
                },
                ready: function() {
                    this._isReady = true;
                    this._oldValue = this.value;
                    // this.$.input.addEventListener("end-editing", this._onInputChanged);
                },
                _onDropAreaOver: function(ev) {
                    // var data = ev.dataTransfer.getData("asset");
                    // if(!data) {
                    //     ev.dataTransfer.effectAllowed = "none";
                    //     ev.dataTransfer.dropEffect = "none"; 
                    //     return;
                    // }
                    ev.dataTransfer.effectAllowed = "all";
                    ev.dataTransfer.dropEffect = "all";

                    ev.preventDefault();
                    ev.stopPropagation();
                },
                _onDropAreaAccept: function(ev) {
                    var data = ev.dataTransfer.getData("asset");
                    if (!data) {
                        return;
                    }
                    ev.preventDefault();
                    ev.stopPropagation();

                    let subPath = calcRelativePath(window.projectFolder + "/", data);
                    this.set("value", subPath);
                    this.async(() => {
                        this.fire('end-editing');
                    }, 1);
                },


                _inputValueChanged: function() {
                    if (this.inputValue == this.value) {
                        return;
                    }
                    this.value = this.inputValue;
                    this.async(() => {
                        this.fire('end-editing');
                    }, 1);
                },

                _valueChanged: function() {
                    this.inputValue = this.value;

                    // if(this._oldValue == this.value) {
                    //     return;
                    // }
                    // this._oldValue = this.value;
                    // if(!this._isReady) {
                    //     return;
                    // }
                    // this.async(() => {
                    //     this.fire('end-editing');
                    // }, 1);
                },

            });
        })();
    </script>
</dom-module>